/**
 * 给组件传递 Props
 *
 *    可以在调用组件时给组件传递 props 属性，来让组件实现不同的效果。
 *
 *    基本使用步骤：
 *        1. 给组件传递 props，就是在组件的开始标签上传递类似与 className 这种属性即可。
 *          <Hello  a="1" b="2"  />
 *          PS: 传递的 prop 的值，可以是任意的 JavaScript 值，比如：
 *              1. 字符串：   a="1"
 *              2. 数值：     a={1}
 *              3. 布尔值：   a={true}   a={false}
 *              4. null 与 undefined:   a={null}    a={undefined}
 *              5. 数组：     a={['1', '2']}
 *              6. 对象：     a={{ key1: 'value1', key2: 'value2' }}
 *              7. 函数：     a={() => {}}
 *              8. JSX:       a={<h1></h1>}
 *              ...
 *        2. 组件内如何获取这些 prop
 *              类组件：
 *                  通过 this.props 获取到全部的 prop 的一个对象
 *              函数组件：
 *                  通过 函数的 第一个参数
 *  PS:
 *    1. prop 数据是只读的。
 *    2. Vue 中 props 数据，需要事先在 组件内部通过 props 选项来声明。React 不需要
 *    3. React 是 没有 Attriblutes 这个概念的。没有属性透传这个操作。
 */

import { Component } from "react";

// 创建一个 类组件
class Hello extends Component {
  render() {
    // 获取传递过来的 props ，通过 this.props
    console.log(this.props, "Hello");

    let { name, age } = this.props;

    return (
      <div>
        <h2>Hello 组件</h2>
        <p>
          欢迎 {name}，今年 {age} 岁
        </p>

        <button
          onClick={() => {
            console.log("点我");
            name += "~";
          }}
        >
          点我，修改名字
        </button>
      </div>
    );
  }
}

// 创建一个 函数组件
function World({ fruits, className }) {
  // console.log(props, "World");
  console.log("World", this);
  return (
    <div className={className}>
      <h2>World 组件</h2>

      <ul>
        {fruits.map((item, index) => {
          return <li key={index}>{item}</li>;
        })}
      </ul>
    </div>
  );
}

export default function App() {
  return (
    <div>
      <h1>App</h1>

      <Hello name="张三" age="18" />
      <hr />
      <Hello name="里斯" age="20" />

      <hr />

      <World fruits={["Apple", "Banana"]} className="box" />

      <hr />

      <World fruits={["西瓜", "菠萝"]} className="box" />
    </div>
  );
}
